| Vant Button 按钮 | 您所在的位置：网站首页 › vant css选不中元素 › Vant Button 按钮 |
|
引入import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
代码演示按钮类型 支持default、primary、info、warning、danger五种类型，默认为default 默认按钮 主要按钮 信息按钮 警告按钮 危险按钮 朴素按钮通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。 朴素按钮 朴素按钮 细边框设置hairline属性可以开启 0.5px 边框，基于伪类实现 细边框按钮 细边框按钮 禁用状态通过disabled属性来禁用按钮，禁用状态下按钮不可点击 禁用状态 禁用状态 加载状态通过loading属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过loading-text设置加载状态下的文字 按钮形状通过square设置方形按钮，通过round设置圆形按钮 方形按钮 圆形按钮 图标按钮通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL 按钮 按钮 按钮尺寸支持large、normal、small、mini四种尺寸，默认为normal 大号按钮 普通按钮 小型按钮 迷你按钮 块级元素按钮在默认情况下为行内块级元素，通过block属性可以将按钮的元素类型设置为块级元素 块级元素 页面导航可以通过url属性进行 URL 跳转，或通过to属性进行路由跳转 URL 跳转 路由跳转 自定义颜色通过color属性可以自定义按钮的颜色 单色按钮 单色按钮 渐变色按钮 APIProps参数说明类型默认值type类型，可选值为 primary info warning dangerstringdefaultsize尺寸，可选值为 large small ministringnormaltext按钮文字string-color v2.1.8按钮颜色，支持传入linear-gradient渐变色string-icon左侧 图标名称 或图片链接string-tagHTML 标签stringbuttonnative-type原生 button 标签 type 属性string-block是否为块级元素booleanfalseplain是否为朴素按钮booleanfalsesquare是否为方形按钮booleanfalseround是否为圆形按钮booleanfalsedisabled是否禁用按钮booleanfalsehairline是否使用 0.5px 边框booleanfalseloading是否显示为加载状态booleanfalseloading-text加载状态提示文字string-loading-type加载图标类型，可选值为spinnerstringcircularloading-size加载图标大小string20pxurl点击后跳转的链接地址string-to点击后跳转的目标路由对象，同 vue-router 的 to 属性string | object-replace是否在跳转时替换当前页面历史booleanfalseEvents事件名说明回调参数click点击按钮，且按钮状态不为加载或禁用时触发event: Eventtouchstart开始触摸按钮时触发event: TouchEvent以下是一个简单示例： W3Cschool(w3cschool.cn)按钮类型 主要按钮 信息按钮 默认按钮 危险按钮 警告按钮朴素按钮 朴素按钮 朴素按钮细边框 细边框按钮 细边框按钮禁用状态 禁用状态 禁用状态加载状态 按钮形状 方形按钮 圆形按钮 var app = new Vue({ el: '#app', data: { }, methods: { }, created() { }, }) |
| CopyRight 2018-2019 实验室设备网 版权所有 |